<template>
  <div>
    <el-card style="margin-bottom: 100px">
      <!-- 表格上部搜索，新增仓库区 -->
      <el-row :gutter="20" type="flex" justify="start">
        <el-date-picker
          v-model="selectDateSpan"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="margin-left: 10px"
          @click="getTableDate(1)"
          >搜索明细</el-button
        >
        <el-button type="danger" @click="openPullDialog"
          >全量拉取统计数据</el-button
        >
      </el-row>

      <!-- 表格 -->
      <el-table :data="dataList" style="width: 100%" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="gitlab_name" label="仓库名"></el-table-column>
        <el-table-column prop="add_num" label="新增行数"></el-table-column>
        <el-table-column prop="remove_num" label="删除行数"></el-table-column>
        <el-table-column prop="total_num" label="总行数"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
      </el-table>
      <!-- 分页区 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next, jumper, total"
          :total="totalPageNum"
          :current-page.sync="curPageNum"
          @current-change="getTableDate"
        >
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form ref="form" label-position="left" label-width="80px">
        <el-form-item label="范围">
          <el-date-picker
            style="width: 100%"
            v-model="selectPullCodeDateSpan"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-M-d"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="color: red">
        注意：此操作会清除指定时间范围内的所有统计数据，并重新拉取，预计耗时20分钟
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="pullCode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { codeCountList, codeCountComplement } from '@/api/codeCount';
export default {
  created() {
    this.codeCountList(1);
  },
  data() {
    return {
      selectDateSpan: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 1000 * 3600 * 24;
        },
      },
      dataList: [],
      totalPageNum: 0,
      curPageNum: 1,
      dialogVisible: false,
      selectPullCodeDateSpan: null,
    };
  },
  methods: {
    codeCountList(pageNum, startDate = null, endDate = null) {
      codeCountList({
        pageSize: 10,
        pageNum,
        startDate,
        endDate,
      }).then((res) => {
        const { countList, total } = res;
        this.dataList = countList;
        this.totalPageNum = total;
      });
    },
    getTableDate(pageNum) {
      this.curPageNum = pageNum;
      if (this.selectDateSpan) {
        //有日期
        this.codeCountList(
          pageNum,
          this.selectDateSpan[0],
          this.selectDateSpan[1]
        );
        // codeCountList
      } else {
        //无日期
        this.codeCountList(pageNum);
      }
    },
    openPullDialog() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.selectPullCodeDateSpan = null;
    },
    async pullCode() {
      if (
        Array.isArray(this.selectPullCodeDateSpan) &&
        this.selectPullCodeDateSpan.length === 2
      ) {
        await codeCountComplement({
          startDate: this.selectPullCodeDateSpan[0],
          endDate: this.selectPullCodeDateSpan[1],
        })
          .catch((err) => {
            this.$message.error(err);
          })
          .finally(() => {
            this.handleClose();
          });
      } else {
        this.$message.error('请先选择时间');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.line {
  text-align: center;
}
</style>
